{include file="$header"}
<div id="app" v-cloak>
    <div class="el-warp">
        <div class="login-wrapper">
            <div class="login-container">
                <div class="login-body">
                    <div class="login-side">
                        <div class="login-side-content">
                            <div class="login-side-logo">
                                <img src="{$system.logo}">
                            </div>
                            <div class="login-side-title">{:lang('login side title')}</div>
                            <div class="login-side-comments">{:lang('login side comments')}</div>
                            <div class="login-side-footer">
                                <a href="javascript:;">{:lang('login side footer')}</a>
                            </div>
                        </div>
                    </div>
                    <div class="login-form-warp">
                        <div class='login-form-content'>
                            <div class="login-warp">
                                <div class="login-title">{:lang('user login')}</div>
                                <div class="login-ctitle">USER LOGIN</div>
                                <el-form ref="loginForm" class="login-form" :model="loginForm" :rules="rules" @submit.native.prevent>
                                    <template v-if="captchaShow">
                                        <div class="captcha-title">{:lang('machine verification')}</div>
                                        <el-form-item v-if="captcha !== '' " prop="captcha">
                                            <img class="captcha-img" :src="captcha" @click="getCaptcha()" />
                                            <el-input class="captcha-code" v-model="loginForm.captcha" placeholder="{:lang('please enter the graphic verification code above')}" @keyup.enter.native="submitForm()"></el-input>
                                        </el-form-item>
                                        <el-button :disabled="loginForm.captcha.length === 4 ? false : true" class="login-btn" @click="submitForm()" :loading="loading" plain>
                                            {:lang('verification')}
                                        </el-button>
                                    </template>
                                    <template v-else>
                                        <el-form-item prop="loginAccount">
                                            <el-input v-model="loginForm.loginAccount" prefix-icon="el-icon-user" placeholder="{:lang('please enter email/mobile')}"></el-input>
                                        </el-form-item>
                                        <el-form-item prop="loginPassword">
                                            <el-input v-model="loginForm.loginPassword" prefix-icon="el-icon-key" placeholder="{:lang('please enter password')}" show-password @keyup.enter.native="getCaptcha()"></el-input>
                                        </el-form-item>
                                        <el-form-item prop="checked">
                                            <el-checkbox v-model="loginForm.checked">{:lang('automatically log in within two weeks')}</el-checkbox>
                                        </el-form-item>
                                        <el-button class="login-btn" :loading="loading" @click="getCaptcha()" plain>
                                            {:lang('login')}
                                        </el-button>
                                        <div class="regOrPwd">
                                            <a href="{:url('login/password')}" class="password">{:lang('forgot password')}？</a>
                                            <a href="{:url('login/register')}" class="register">{:lang('sign up now')}</a>
                                        </div>
                                    </template>
                                </el-form>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<script type="text/javascript">
    new Vue({
        el: '#app',
        data() {
            return {
                loading: false,
                storageTime: 240*60*60*1000,
                captcha: "",
                captchaShow: false,
                loginForm: {
                    loginAccount: "",
                    loginPassword: "",
                    captcha: "",
                    checked: false,
                },
                rules: {
                    loginAccount: [
                        { required: true, message: lang('please enter'), trigger: 'blur' },
                    ],
                    loginPassword: [
                        { required: true, message: lang('please enter'), trigger: 'blur' },
                    ]
                },
            }
        },
        methods: {
            /**
             * 准备登录
             */
            getCaptcha() {
                let self = this;
                self.$refs.loginForm.validate((valid) => {
                    if (valid) {
                        request.post('login/isNeedVerification', {}, function(res){
                            self.captcha = res === 1 ? url('login/verify', {rand: Math.random()}) : '';
                            if (self.captcha !== '') {
                                self.captchaShow  = true;
                            } else {
                                self.submitForm();
                            }
                        })
                    } else {
                        return false;
                    }
                })
            },
            /**
             * 登录
             */
            submitForm() {
                let self = this;
                self.loading = true;
                request.post('login/index', self.loginForm, function (res){
                    self.loading = false;
                    self.$message({ showClose: true, message: res.message, type: res.status});
                    if(res.status === 'success'){
                        location.href = res.url;
                    } else {
                        self.captchaShow = false;
                        self.loginForm.captcha = "";
                    }
                })
            },
        }
    });
</script>
{include file="$footer"}